<template>
    <el-dialog title="查看拆箱理货" :visible.sync="unForm" width="1100px">
        <el-form :inline="true" :model="form" ref="form" class="search-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号：" prop="containerId">
                        {{ form.containerId }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型：" prop="containerType">
                        {{ form.containerType }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸：" prop="containerSize">
                        {{ form.containerSize }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船代：" prop="shipAgentName">
                        {{ form.shipAgentName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="铅封号：">
                        {{ form.sealNo }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="内外贸：" prop="tradeType">
                        {{ form.tradeType | _filterTradeType }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船名：">
                        {{ form.shipName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次：">
                        {{ form.voyage }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业港口：">
                        {{ form.portName }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="是否货损：">
                        {{ form.isDamaged | _filterTrueOrFalse }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.isDamaged">
                <el-col :span="24">
                    <el-form-item label="货损描述：" prop="damagedExplan" class="detail-form-more">
                        {{ form.damagedExplan }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="拆箱备注：" prop="remark">
                        {{ form.remark }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="拆箱总件数：">
                        {{ form.cargoCount }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="拆箱总货重：">
                        {{ form.cargoWeight }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="拆箱照片：">
                        <attachments :isPreview="true"  v-model="form.attachments" listType="picture-card"></attachments>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="table" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" fixed="left" label="序号" width="55" ></el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="120"></el-table-column>
            <el-table-column prop="packing" label="包装"  min-width="120"></el-table-column>
            <el-table-column prop="cargoCount" label="拆箱件数"  min-width="120"></el-table-column>
            <el-table-column prop="cargoWeight" label="拆箱货重"  min-width="120"></el-table-column>
            <el-table-column prop="isFinish" label="拆箱完成"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.isFinish | _filterIsFinish }}
                </template>
            </el-table-column>
            <el-table-column prop="tallyClerk" label="理货人"  min-width="120"></el-table-column>
            <el-table-column prop="tallyTime" label="理货时间"  min-width="200"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="unForm = false">关 闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import attachments from '@/components/file-upload'
    import { addPlanList,editPlanList } from '@/api/planList/planList'
    import { REG_ALL_NUMBER, REG_NUMBER } from "@/utils/Reg";

    export default {
        name: "unboxDetailForm",
        components: {
            attachments
        },
        data() {
            return {
                isEdit: false,
                unForm: false,
                form: this.clearForm(),
                table: [this.clearTable()],
            }
        },
        mounted() {
            console.log(this.$route)
        },
        methods: {
            clearForm() {
                return {
                    containerId: "",
                    containerSize: "",
                    containerType: "",
                    tradeType: "",
                    sealNo: "",
                    portCode: "",
                    shipAgentName: "",
                    shipAgentId: "",
                    remark: "",
                    enchaseWay: "GZ",
                    cargoWeight: 0,
                    cargoCount: 0,
                    imOrEx: "EX",
                    attachments: [],
                }
            },
            clearTable() {
                return {
                    cargoName: "",
                    packing: "",
                    cargoCount: "",
                    cargoWeight: "",
                    isFinish: false,
                    tallyClerk: "",
                    tallyTime: ""
                }
            },
        },
        watch: {
            unForm(bool) {
                if (!bool) {
                    this.$parent.unForm = false
                }
            },
            count(val) {
                this.form.cargoCount = val
            },
            weight(val) {
                this.form.cargoWeight = val
            }
        },
        computed: {
            isFinish() {
                return this.table.length > 0 && this.table[this.table.length - 1].isFinish
            },
            // 总件数
            count() {
                let count = 0
                this.table.forEach(item => {
                    if (Number(item.cargoCount) >= 0) {
                        count = count + Number(item.cargoCount)
                    }
                })
                return count
            },
            // 总货重
            weight() {
                let weight = 0
                this.table.forEach(item => {
                    if (Number(item.cargoWeight) >= 0) {
                        weight = weight + Number(item.cargoWeight)
                    }
                })
                return weight
            },
        },
    }
</script>

<style scoped>

</style>
